import React, { Component } from 'react'

const MyContext = React.createContext({ name: "默认值" });

function Header(props) {
    return (
        <div>
            header--{props.name}--{props.age}
        </div>
    )
}

function Footer(props) {
    return (
        <div>
            footer--{props.name}--{props.age}
        </div>
    )
}

function Hoc(Wrap) {
    return class extends Component {
        render() {
            return (
                <MyContext.Consumer>
                    {
                        value => {
                            return (
                                <div>
                                    <Wrap {...value} {...this.props}></Wrap>
                                </div>
                            )
                        }
                    }
                </MyContext.Consumer>
            )
        }
    }
}

const HocHeader = Hoc(Header);
const HocFooter = Hoc(Footer);

export default class App extends Component {
    render() {
        return (
            <div>
                <MyContext.Provider value={{ name: "jack" }}>
                    <HocHeader age={18}></HocHeader>
                    <HocFooter age={20}></HocFooter>
                </MyContext.Provider>

            </div>
        )
    }
}